<!-- 代理申请 -->
<template>
	<uni-forms ref="applyFormRef" v-model="state.model" :rules="rules" validateTrigger="bind" labelWidth="160"
		labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
		<view class="bg-white form-box ss-p-x-30">
			<uni-forms-item name="name" label="真实姓名" class="form-item">
				<uni-easyinput v-model="state.model.name" placeholder="请填您的真实姓名" :inputBorder="false"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
			</uni-forms-item>

			<uni-forms-item name="mobile" label="手机号" class="form-item">
				<uni-easyinput v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="areaName" label="省市区" @tap="state.showRegion = true" class="form-item">
				<uni-easyinput v-model="state.model.areaName" disabled :inputBorder="false"
					:styles="{ disableColor: '#fff', color: '#333' }"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
					placeholder="请选择省市区">
					<template v-slot:right>
						<uni-icons type="right" />
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="remark" label="备注信息" :formItemStyle="{ alignItems: 'flex-start' }"
				:labelStyle="{ lineHeight: '5em' }" class="textarea-item">
				<uni-easyinput :inputBorder="false" type="textarea" v-model="state.model.remark"
					placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
					placeholder="请输入备注信息" clearable />
			</uni-forms-item>
		</view>
	</uni-forms>
	<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
		<view class="footer-box ss-flex-col ss-row-between ss-p-20">
			<view class="ss-m-b-20">
				<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">提交申请</button>
			</view>
		</view>
	</su-fixed>

	<!-- 省市区弹窗 -->
	<su-region-picker :show="state.showRegion" @cancel="state.showRegion = false" @confirm="onRegionConfirm" />

</template>

<script setup>
	import {
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import _ from 'lodash-es';
	import {
		mobile
	} from '@/sheep/validate/form';
	import AreaApi from '@/sheep/api/system/area';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		BrokerageTypeEnum
	} from '@/sheep/util/const';

	const applyFormRef = ref(null);
	const state = reactive({
		showRegion: false,
		model: {
			name: '',
			mobile: '',
			remark: '',
			areaName: '',
		},
		rules: {},
	});

	const props = defineProps({
		applyType: ''
	})

	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入您的真实姓名',
			}, ],
		},
		mobile,
		remark: {
			rules: [{
				required: false,
				errorMessage: '请输入备注信息',
			}, ],
		},
		areaName: {
			rules: [{
				required: true,
				errorMessage: '请选择您的位置',
			}, ],
		},
	};

	// 确认选择地区
	const onRegionConfirm = (e) => {
		state.showRegion = false;
		if (e.district_id) {
			state.model.areaName = `${e.province_name} ${e.city_name} ${e.district_name}`;
			state.model.areaId = e.district_id;
			return
		}
		if (e.city_id) {
			state.model.areaName = `${e.province_name} ${e.city_name}`;
			state.model.areaId = e.city_id;
			return
		}
		state.model.areaName = `${e.province_name}`;
		state.model.areaId = e.province_id;
	};

	// 获得地区数据
	const getAreaData = () => {
		if (_.isEmpty(uni.getStorageSync('areaData'))) {
			AreaApi.getAreaTree().then((res) => {
				if (res.code === 0) {
					uni.setStorageSync('areaData', filterAreaData(res.data));
				}
			});
		} else {
			uni.setStorageSync('areaData', filterAreaData(uni.getStorageSync('areaData')))
		}
	};

	// 给地区数据加全部
	const filterAreaData = (data) => {
		data?.forEach((item) => {
			if (item.children && item.children.length) {
				if (item.children[0].id !== 0) {
					item.children.unshift({
						id: 0,
						name: "全部",
						children: [{
							id: 0,
							name: "全部",
						}]
					})
				}
				filterAreaData(item.children)
			}
		})
		return data
	}

	// 提交代理申请信息
	const onSave = async () => {
		// 参数校验
		const validate = await unref(applyFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) {
			return;
		}

		// 提交请求
		const formData = {
			realName: state.model.name,
			phoneNumber: state.model.mobile,
			areaCode: state.model.areaId,
			areaName: state.model.areaName,
			remark: state.model.remark,
			applyType: props.applyType,
		};
		const {
			code
		} =
		await BrokerageApi.onApply(formData)
		if (code === 0) {
			sheep.$router.back();
		}
	};

	// onLoad(async (options) => {
	// 	// 获得地区数据
	// 	getAreaData();
	// });
	getAreaData()
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 8rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 22rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.default-box {
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;

		.default-box-title {
			font-size: 28rpx;
			color: #333333;
			line-height: normal;
		}
	}

	.footer-box {
		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.cancel-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--ui-BG);
		}
	}
</style>